<template>
  <up-tabbar :value="currentIndex" @change="tabbarChange" :border="false" zIndex="999" activeColor="#FFEAC7" inactiveColor="#B7B7B7">
    <up-tabbar-item
      :text="item.text"
      v-for="item in tabbarList"
      :key="item.text"
      :name="item.name"
    >
      <template #active-icon>
        <image
          :src="item.activeIcon"
          :style="`width: ${iconSize}; height: ${iconSize}`"
        ></image>
      </template>
      <template #inactive-icon>
        <image
          :src="item.icon"
          :style="`width: ${iconSize}; height: ${iconSize}`"
        ></image>
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onShow } from "@dcloudio/uni-app";
import index from "@/static/images/tabbar/index.png";
import index_active from "@/static/images/tabbar/index_active.png";
import events from "@/static/images/tabbar/events.png";
import events_active from "@/static/images/tabbar/events_active.png";
import gift from "@/static/images/tabbar/gift.png";
import gift_active from "@/static/images/tabbar/gift_active.png";
import mine from "@/static/images/tabbar/mine.png";
import mine_active from "@/static/images/tabbar/mine_active.png";
onShow(() => {
  uni.hideTabBar();
});
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
});
const { iconSize, fontSize, tabbarList, tabbarChange } = customTabbar();
/**
 * @description 自定义tabbar
 * @returns {Object} iconSize 图标尺寸
 * @returns {Object} fontSize 字体尺寸
 * @returns {Array} tabbarList tabbar数据
 * @returns {Function} tabbarChange 切换tabbar
 */
function customTabbar() {
  const iconSize = ref("44rpx");
  const fontSize = ref("18rpx");
  const tabbarList = reactive([
    {
      icon: index,
      activeIcon: index_active,
      text: "首页",
      name: 0,
      page: "/pages/index/index",
    },
    {
      icon: gift,
      activeIcon: gift_active,
      text: "活动",
      name: 1,
      page: "/pages/events/events",
    },
    {
      icon: events,
      activeIcon: events_active,
      text: "赏袋",
      name: 2,
      page: "/pages/gift/gift",
    },
    {
      icon: mine,
      activeIcon: mine_active,
      text: "我的",
      name: 3,
      page: "/pages/mine/mine",
    },
  ]);
  const tabbarChange = (e) => {
    uni.switchTab({
      url: tabbarList[e].page,
    });
  };
  return {
    iconSize,
    fontSize,
    tabbarList,
    tabbarChange,
  };
}
</script>

<style lang="scss" scoped>
//渐变
.active {
  background-image: linear-gradient(
    360deg,
    #ea9efd 0%,
    #46a7fd 85%,
    #b88afd 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
